<template>
  <div>
    <el-dialog :title=" $t('basItemRoute.import')" v-model="visible" height="2000" width="1500"
               :close-on-click-modal="false" draggable>

      <!--查询表单-->
      <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">

        <el-form-item :label="$t('basItemRoute.excelFile')" prop="excelFile">
          <el-input v-model="state.queryForm.excelFile" style="width: 500px" clearable disabled
                    :placeholder="$t('basItemRoute.selectExcelFile')">
            <template #append>
              <el-upload
                  ref="uploadRef"
                  class="upload-demo"
                  :headers="headers"
                  action='/api/eletile-digital/wmsAssetCard/checkImportItemRoute'
                  name="file"
                  :show-file-list="false"
                  :on-success="handleSuccess"
                  :on-error="handleError">
                <template #trigger>
                  <el-button type="primary">{{ $t('basItemRoute.select') }}
                    <el-icon><Select/></el-icon>
                  </el-button>
                </template>
              </el-upload>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="printer" type="info" plain @click="exportTemplate">
            {{ $t('basItemRoute.downloadTemplate') }}
          </el-button>
        </el-form-item>
      </el-form>
      <!--查询结果的列表-->
      <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                style="width: 100%;height: 100%" :cell-style="tableStyle.cellStyle" stripe
                :header-cell-style="tableStyle.headerCellStyle">
        <el-table-column type="selection" width="40" align="center"/>
        <el-table-column type="index" label="#" width="80"/>
        <el-table-column prop="assetOrg" :label="$t('wms.assetOrg')" show-overflow-tooltip width="180"/>
        <el-table-column prop="shippersOrg" :label="$t('wms.shipperOrg')" show-overflow-tooltip width="180"/>
        <el-table-column prop="cardSource" :label="$t('wms.cardSource')" show-overflow-tooltip width="150"/>
        <el-table-column prop="assetClass" :label="$t('wms.assetClass')" show-overflow-tooltip width="150"/>
        <el-table-column prop="cardCode" :label="$t('wms.cardCode')" show-overflow-tooltip width="150"/>
        <el-table-column prop="assetName" :label="$t('wms.assetName')" show-overflow-tooltip width="350"/>
        <el-table-column prop="unit" :label="$t('iot.unit')" show-overflow-tooltip width="100"/>
        <el-table-column prop="assetsNumber" :label="$t('iot.qty')" width="150" show-overflow-tooltip/>
        <el-table-column prop="startDate" :label="$t('wms.startDat')" show-overflow-tooltip width="150"/>
        <el-table-column prop="assetCode" :label="$t('wms.assetCode')" show-overflow-tooltip width="150"/>
        <el-table-column prop="barcode" :label="$t('qms.barCode')" show-overflow-tooltip width="150"/>
        <el-table-column prop="specification" :label="$t('qms.specification')" show-overflow-tooltip width="150"/>
        <el-table-column prop="assetLocation" :label="$t('wms.assetLocation')" show-overflow-tooltip width="150"/>
        <el-table-column prop="manufacturer" :label="$t('wms.manufacturer')" show-overflow-tooltip width="250"/>
        <el-table-column prop="documentStatus" :label="$t('mes.assetStatus')" show-overflow-tooltip width="150"/>
        <el-table-column prop="dispositionSituation" :label="$t('wms.dispositionSituation')" show-overflow-tooltip width="150"/>
        <el-table-column prop="availableQuantity" :label="$t('wms.quantityAvailable')" show-overflow-tooltip width="150"/>
        <el-table-column prop="requisitionedQuantity" :label="$t('wms.quantityReceived')" show-overflow-tooltip width="150"/>
        <el-table-column prop="initialization" :label="$t('wms.initialize')" show-overflow-tooltip width="150"/>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">{{ $t('basItemRoute.cancel') }}</el-button>
          <el-button type="primary" @click="onSubmit"
                     :disabled="loading">{{ $t('basItemRoute.confirm') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {useI18n} from "vue-i18n";
import {BasicTableProps, useTable} from "/@/hooks/table";
import {useMessage} from "/@/hooks/message";
import {Session} from '/@/utils/storage';
import {saveWmsAssetCard} from "/@/api/platform/digital/wmsAssetCard";

const {t} = useI18n();

// 定义变量内容
const loading = ref(false);
const visible = ref(false);
const emits = defineEmits(['getChildren'])
const dataForm = reactive({
  excelFile: '',
})
/**
 * 计算请求头部信息
 */
const headers = computed(() => {
  return {
    Authorization: 'Bearer ' + Session.getToken(),
    'TENANT-ID': Session.getTenant(),
    VERSION: import.meta.env.VITE_HEADER_VERSION,
  };
});

//上传成功事件
const handleSuccess = (data: any, uploadFile: any) => {
  if (data.code === 0) {
    state.queryForm.excelFile = uploadFile.name
    state.dataList = data.data
  } else {
    useMessage().error(data.msg);
  }
}
const handleError = () => {
}

//导出模板
const exportTemplate = () => {
  downBlobFile("/eletile-digital/wmsAssetCard/download", {"flag": false}, "Template.xlsx");
}

//查询
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: ""
})


// 提交
const onSubmit = async () => {
  if (state.dataList?.length === 0) {
    useMessage().error(t('basItemRoute.importDataIsNull'));
    return false;
  }
  callInterface()
};

const callInterface = async () => {
  try {
    loading.value = true;
    await saveWmsAssetCard(state.dataList);
    useMessage().success(t('basItemRoute.importSuccess'));
    visible.value = false;
    emits('getChildren', loading);
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
}

// 打开弹框
const openAddDialog = () => {
  visible.value = true;
  // 重置表单数据
  nextTick(() => {
    state.queryForm.excelFile = null;
    state.dataList = [];
  });

};

// 定义表单校验规则
const dataRules = reactive({
  excelFile: [
    {required: true, message: t('basItemRoute.selectExcelFile'), trigger: 'blur'},
  ]
})

const {
  getDataList,
  downBlobFile,
  tableStyle
} = useTable(state)

// 暴露变量
defineExpose({
  openAddDialog
});
</script>